<template>
  <svg :width="width" :height="height">
    <polyline :points="points" fill="none" stroke="#409EFF" stroke-width="2" />
  </svg>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{ series: { timestamp?: string; value: number }[]; width?: number; height?: number }>()
const width = computed(() => props.width ?? 600)
const height = computed(() => props.height ?? 180)
const points = computed(() => {
  const w = Number(width.value), h = Number(height.value)
  const vals = (props.series || []).map(s => Number(s.value || 0))
  const n = vals.length
  if (!n) return ''
  const maxV = Math.max(...vals) || 1
  const minV = Math.min(...vals)
  const span = Math.max(1, maxV - minV)
  return vals.map((v, i) => {
    const x = (i / Math.max(1, n - 1)) * (w - 4) + 2
    const y = h - ((v - minV) / span) * (h - 4) - 2
    return `${x},${y}`
  }).join(' ')
})
</script>
